import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { placeholderHeaderDefaultProps } from './defaultProps';
import type { PlaceholderHeaderOptions } from './type';

export interface PlaceholderHeaderProps extends PlaceholderHeaderOptions, HTMLAttributes<HTMLDivElement> {}

const PlaceholderHeader: FC<PlaceholderHeaderProps> = (props) => {
  const { className, image, children, forwardedRef, ...placeholderHeaderProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('header', { image }, className), ...placeholderHeaderProps },
    children,
  );
};

PlaceholderHeader.displayName = 'PlaceholderHeader';
PlaceholderHeader.defaultProps = placeholderHeaderDefaultProps;

export default PlaceholderHeader;
